<template>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="page.pagenum" v-model:page-size="page.pagesize"
            :page-sizes="[10, 50, 100, 200]" :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />

    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const currentPage4 = ref(4);
const pageSize4 = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const emit = defineEmits(['sendsize', 'sendpage']);


const handleSizeChange = (val) => {
    emit("sendsize", val);
};
const handleCurrentChange = (val) => {
    emit("sendpage", val);
};
defineProps({
    page: {
        pagenum: Number,
        pagesize: Number,
        total: Number
    }
});

</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
<style lang="less">
.demo-pagination-block {
    .el-select__selection {
        min-width: 60px !important;
    }
}
</style>